<template>
	<view>
		<div class="cart_null" v-if="list.length==0">
			<van-icon name="cart" />
			<h1>购物车为空，请选购商品！！</h1>
		</div>
		<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" size="large" @tap="add_address"
			v-if="address.length==0">
			+添加收获地址
		</van-button>
		<!-- 收货地址 -->
		<div class="address_info" v-else>
			<div class="user_info">
				<div>收货人: {{address.userName}}</div>
				<div>地址: {{address.cityName}}{{address.countyName}}{{address.detailInfo}}</div>
			</div>
			<div class="user_phone">联系电话: {{address.telNumber}}</div>
		</div>
		<!-- 购物车列表 -->
		<van-swipe-cell :right-width="65 " :left-width=" 65 " v-for="(item,index) in list" :key="index">
			<view slot="left">
				<checkbox :checked="item.flag" @tap="Single_choice(index)"></checkbox>
			</view>
			<van-cell-group>
				<van-card :num="item.goods_number" :price="item.goods_price" desc="描述信息" :title="item.goods_name"
					:thumb=" item.goods_small_logo">
					<view slot="footer">
						<van-stepper :value="item.goods_number" @plus="add(index)" @minus="eee(index)" />
					</view>
				</van-card>
			</van-cell-group>
			<view slot="right">
				<van-button type="danger" @tap="del(index)">删除</van-button>
			</view>
		</van-swipe-cell>
		<!-- 底部 -->
		<van-submit-bar :price="nums*100" button-text="提交订单" @submit="place_order">
			<van-tag type="primary">
				<van-checkbox :value="checks" @change="Select_all">全选</van-checkbox>
			</van-tag>
		</van-submit-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: wx.getStorageSync('cart') || [],
				checks: true,
				address: {},
				num_check:0
			};
		},
		onLoad() {
			this.getccc()
		},
		onShow() {
			this.list = wx.getStorageSync('cart') || []
			this.address = wx.getStorageSync("address");
		},
		methods: {
			getccc() {
				this.checks = wx.getStorageSync('cart').every(item => {
					return item.flag == true
				})
			},
			// 步进器
			add(index) {
				this.list[index].goods_number += 1
				wx.setStorageSync('cart', this.list)
			},
			eee(index) {
				this.list[index].goods_number -= 1
				wx.setStorageSync('cart', this.list)
			},
			// 删除
			del(index) {
				this.list.splice(index, 1)
				wx.setStorageSync('cart', this.list)
			},
			// 全选
			Select_all(e) {
				this.checks = e.detail
				this.list.forEach(item => {
					item.flag = this.checks
				})
				wx.setStorageSync('cart', this.list)
			},
			// 单选
			Single_choice(index) {
				this.list[index].flag = !this.list[index].flag
				wx.setStorageSync('cart', this.list)
				this.getccc()
			},
			// 添加收货地址
			add_address() {
				wx.chooseAddress({
					success: function(res) {
						console.log(res)
						wx.setStorageSync("address", res);
					}
				})
			},
			// 提交订单
			place_order() {
				if (this.address.length == 0) {
					wx.showToast({
						title: "选择收货地址",
						icon: 'error',
					})
					return
				}
				if (this.num_check == 0) {
					wx.showToast({
						title: "选购商品",
						icon: 'error',
					})
					return
				}
				wx.navigateTo({
					url: '../pay/pay'
				});
			}
		},
		computed: {
			nums() {
				var num = 0
				this.list.forEach(item => {
					if (item.flag == true) {
						num += item.goods_number * item.goods_price
					}
				})
				return num
			},
			check_num() {
				var num = 0
				this.list.forEach(item => {
					if (item.flag == true) {
						num++
					}
				})
				this.num_check=num
			}
		}
	}
</script>

<style lang="scss">
	.cart_null {
		width: 100%;
		height: 100%;
		position: relative;
		margin-top: 200rpx;

		.van-icon {
			font-size: 200rpx;
			transform: translateX(130%);
		}

		h1 {
			margin-top: 100rpx;
			margin-left: 150rpx;
		}
	}

	.address_info {
		width: 100%;
		height: 180rpx;
		padding: 20rpx;
		color: #555555;
		background-color: #E5E5E5;
		border-bottom: 3px solid #DD524D;

	}
</style>
